<template>
    <div class="goods">
        <!-- 搜索 -->
        <el-input style="width:500px;margin-right:10px" v-model="search"></el-input>
        <el-button type="primary" @click="SearchValue()">
            <el-icon><Search /></el-icon>
        </el-button>
          <!-- 添加 -->
         <el-button type="primary" @click="router.push('/add')">添加用户</el-button>
        <!-- 表格 -->
        <Table :cols="cols" :data="tableData">
            <template #time ="{row}">
                {{$filters.formatTime(row.add_time)}}
            </template>
            <!-- 操作 -->
            <template #action="{row}">
                <span class="dialog-footer">
                    <el-button type="primary" :icon="Edit" @click="open(row)"></el-button> 
                    <el-button :icon="Delete" type="danger" @click="del(row)"></el-button>
                </span>
            </template>
        </Table>
        <!-- 分页 -->
        <el-pagination
            v-model:currentPage="params.pagenum"
            v-model:page-size="params.pagesize"
            :page-sizes="[5, 10, 20, 30]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
            <!-- 修改弹框 -->
        <Dialog :dialog="changeForm">
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="changeForm[0].show = false">取消</el-button> 
                    <el-button type="primary" @click="changed()">确定</el-button>
                </span>
            </template>
        </Dialog>
    </div>
</template>
<script setup>
import Table from '@/components/Table.vue';
import Dialog from '@/components/Dialog.vue';
import {useRouter} from 'vue-router';
import { reactive, ref,onMounted,toRefs, activated } from 'vue';
import { getGoods,delGoods,changeGoods } from '@/utils/goods.js'
import { Search, Edit, Delete, Setting } from "@element-plus/icons-vue";
import { ElMessage,ElMessageBox } from 'element-plus';
const router = useRouter();
// 搜索
const search = ref('');
// 列(表格)
const cols = [
    {
        title:'#',
        type:'index',
        align:'center',
        width:60
    },
    {
        title:'商品名称',
        name:'goods_name',
        align:'center',
        width:400
    },
    {
        title:'商品价格（元）',
        name:'goods_price',
        align:'center'
    },
    {
        title:'商品数量',
        name:'goods_number',
        align:'center'
    },
    {
        title:'商品重量',
        name:'goods_weight',
        align:'center'
    },
    {
        title:'创建时间',
        slot:'time',
        align:'center',
        width:200
    },
    {
        title:'操作',
        slot:'action',
        align:'center',
        width:200
    }
]
// 修改弹框
const changeForm = ref([
    {
        show:ref(false),
        title:'修改商品',
        data:ref([
            {
                name:'商品名称',
                prop:'goods_name',
                value:'',
                disabled:true
            },
            {
                name:'商品价格',
                prop:'goods_price',
                value:''
            },
            {
                name:'商品数量',
                prop:'goods_number',
                value:''
            },
            {
                name:'商品重量',
                prop:'goods_weight',
                value:''
            },
            {
                prop:'goods_id',
                value:'',
                hide:true
            }
        ])
    },
    {   
        slot:'footer',
    }
    ])
// 总条数
const total = ref(0);
// 分页
const params = reactive( {
    query:'',
    pagesize:5,
    pagenum:1
});
// 表格
const tableData = ref([]);
// 修改 
const changed = async()=>{
    var form = {}; 
    changeForm.value[0].data.map(item=>{
        return form[item.prop] = item.value
    })
    console.log(form)
    let data = await changeGoods(form.goods_id,form);
    // console.log(data,'修改')
    if(data.meta.status == 200){
        ElMessage.success(data.meta.msg);
        changeForm.value[0].show = false;
        getuserList();
    }
}
//修改按钮
const open = (row)=>{              
    changeForm.value[0].show = true;
    changeForm.value[0].data.forEach(item=>{
        item.prop,Object.keys(row).forEach((it,i)=>{
            if(item.prop == it){
                item.value = Object.values(row)[i];
            }
        })
    });
}
// 删除
const del = async (row)=>{
    ElMessageBox.confirm(
    `您确认删除【${row.goods_name}】吗？删除后无法恢复`,
    '删除',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
        var data = await delGoods(row.goods_id)
      ElMessage({
        type: 'success',
        message: data.meta.msg,
      })
      getGoodsList();
    }).catch(() => {})
}
// 渲染
const getGoodsList = async ()=>{
    var {data:res} = await getGoods(params);
    total.value = res.total;
    tableData.value = res.goods;
    console.log(201,res)
}
// 分页
const handleSizeChange = (val) => {
    params.pagesize = val;
    getGoodsList();
//   console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
    params.pagenum = val;
    getGoodsList();
//   console.log(`current page: ${val}`)
}
onMounted(() => {
    getGoodsList();
})
</script>
<style lang="scss" scoped>
    
</style>